
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="htmlhead">

    <meta charset="utf-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
    <meta name="description" content=""></meta>
    <meta name="author" content=""></meta>
    <title>后台登录</title>
    <link th:href="@{/css/login.css}" rel="stylesheet"></link>
    <script th:src="@{/layui/layui.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
</head>
<body>


<!--<div class="login">
    <div class="message">亚太餐饮-管理登录</div>
    <div id="darkbannerwrap"></div>
    <form id="loginForm" class="layui-form" method="post" >
        <input name="userId" placeholder="用户名" lay-verify="required" type="text">
        <hr class="hr15">
        <input name="passWord" placeholder="密码"lay-verify="required"  type="password">
        <hr class="hr15">
        <input value="登录" style="width:100%;" type="submit" onclick="login()">
        <hr class="hr20">
        &lt;!&ndash; 帮助 <a onClick="alert('请联系管理员')">忘记密码</a> &ndash;&gt;
    </form>
</div>-->


<div class="login">
    <div class="message">亚太餐饮-管理登录</div>
    <div id="darkbannerwrap"></div>
    <form class="layui-form" action="">
        <div class="layui-form-item" >
                <input type="text" name="userId" required  lay-verify="required" placeholder="用户名" lay-reqtext="用户名不能为空！" autocomplete="off" class="layui-input">
        </div>

        <hr class="hr15">
        <div class="layui-form-item">
                <input type="password" name="password" required lay-verify="required" placeholder="密码" lay-reqtext="密码不能为空！" autocomplete="off" class="layui-input">
        </div>
        <hr class="hr15">
        <div class="layui-form-item">
                <button class="layui-btn" lay-submit lay-filter="formDemo"  style="width:100%;background: #27A9E3;">登录</button>
        </div>
        <hr class="hr20">
    </form>
</div>


<script type="text/javascript">
    var baseURL='${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}';
    function CheckIsNullOrEmpty(value) {
        //正则表达式用于判斷字符串是否全部由空格或换行符组成
        var reg = /^\s*$/
        //返回值为true表示不是空字符串
        return (value != null && value != undefined && !reg.test(value));
    }

    function login() {
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "text",//预期服务器返回的数据类型
            url: "LoginRestController/login" ,//url
            data: $('#loginForm').serialize(),
            success: function (err) {
                if(CheckIsNullOrEmpty(err)){
                    layui.use('layer', function(){ //独立版的layer无需执行这一句
                        var layer = layui.layer;
                        layer.msg('hello');
                        /*layer.open({
                            type: 1
                            ,offset: 't' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                            ,id: 'layerDemo' //防止重复弹出
                            ,content: '<div style="padding: 20px 100px;">'+ err +'</div>'
                            ,btn: '关闭'
                            ,btnAlign: 'c' //按钮居中
                            ,shade: 0 //不显示遮罩
                            ,yes: function(){
                                layer.closeAll();
                            }
                        });*/

                    });
                }else{
                    window.location.href=baseURL+"main.jsp";
                }

            },
            error : function() {
                layui.use('layer', function(){ //独立版的layer无需执行这一句
                    layer = layui.layer;
                    layer.open({
                        type: 1
                        ,offset: 't' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                        ,id: 'layererr' //防止重复弹出
                        ,content: '<div style="padding: 20px 100px;">'+ '内部错误' +'</div>'
                        ,btn: '关闭'
                        ,btnAlign: 'c' //按钮居中
                        ,shade: 0 //不显示遮罩
                        ,yes: function(){
                            layer.closeAll();
                        }
                    });

                });

            }

        });
    }
    layui.use('form', function() {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            var layer = layui.layer;
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</body>
</html>